<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="Dashboard">
  <meta name="keyword"
        content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
  <title>Web</title>
  <!-- Bootstrap core CSS -->
  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <!--时间插件样式-->
  <link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet">
  <!--external css-->
  <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
  <link rel="stylesheet" type="text/css" href="assets/css/zabuto_calendar.css">
  <link rel="stylesheet" type="text/css" href="assets/js/gritter/css/jquery.gritter.css"/>
  <link rel="stylesheet" type="text/css" href="assets/lineicons/style.css">
  <!-- Custom styles for this template -->
  <link href="assets/css/style.css" rel="stylesheet">
  <link href="assets/css/style-responsive.css" rel="stylesheet">
  <script src="assets/js/chart-master/Chart.js"></script>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

  <![endif]-->
  <style>
    .table tr td {
      text-align: center;
      /*height: 50px;*/
      line-height: 43px !important;
      padding: 0px !important;
      box-sizing: border-box;
    }

    .table tr th {
      text-align: center;
      height: 38px;
      line-height: 36px !important;
      padding: 0px !important;
      box-sizing: border-box;
    }
  </style>


</head>

<body>
<section id="container">
  <header class="header black-bg" style="">
    <div class="sidebar-toggle-box">
      <div class="fa fa-bars tooltips" data-placement="right"></div>
    </div>

    <a href="index.html" class="logo"><b v-text="people_name"></b></a>

      <div class="top-menu">
      <ul class="nav pull-right top-menu">
        <li><a class="logout"  href="login.html">登出</a></li>
      </ul>
    </div>
  </header>
  <!--左边导航-->
  <aside>
    <div id="sidebar" class="nav-collapse ">
      <!-- sidebar menu start-->
      <ul class="sidebar-menu" id="nav-accordion">
        <p class="centered">
          <a href="profile.html"><img src="assets/img/ui-sam.jpg"
                                                        class="img-circle" width="60"></a></p>
        <div class="baby">
        <h5 class="centered" v-text="people_name"></h5>
          </div>
        <li class="mt user">
          <a class="active " href="javascript:void(0);">
            <i class="fa fa-dashboard"></i>
            <span>用户管理</span>
          </a>
        </li>
        <li class="sub-menu xiangmu">
          <a href="javascript:void(0);">
            <i class="fa fa-desktop"></i>
            <span>项目管理</span>
          </a>
        </li>
        <li class="sub-menu renwu">
          <a href="javascript:void(0);">
            <i class="fa fa-cogs"></i>
            <span>任务管理</span>
          </a>
        </li>
      </ul>
    </div>
  </aside>
  <!--main content start-->
  <section id="main-content">
    <section class="wrapper" style="width: 100%;height: 573px;background: #fff;margin-top: 60px;">

      <!--用户管理-->
      <div class="management people" style="background-color:white;">
        <table class="table table-striped table-bordered bootstrap-datatable datatable responsive"
               style="width: 100% ;min-width: 1100px; margin-top:10px;">
          <tr>
            <th style="width:20%">ID</th>
            <th style="width:20%">姓名</th>
            <th style="width:20%">账号</th>
            <th style="width:20%">操作</th>
          </tr>
          <tr v-for="(user, index) in userList">
            <td v-text="user.id"></td>
            <td v-text="user.name"></td>
            <td v-text="user.username"></td>
            <td>
              <button type="button" class="btn btn-info" data-toggle="modal"
                      data-target=".bs-example-modal-lg" @click="baby(user.id)">详情
              </button>
              <button type="button" class="btn btn-warning"
                      data-target=".bs-example-modal-lg-update" data-toggle="modal"
                      @click="updatebaby(user.id)">修改
              </button>
              <button type="button" class="btn btn-danger" @click="deteleUserById(user.id)">删除
              </button>
            </td>
          </tr>
        </table>
        <!--人的详情-->
        <div class="modal fade bs-example-modal-lg " tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">个人信息</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">姓名:</label>
                    <input type="text" class="form-control" id="my_name" disabled>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">账号:</label>
                    <input type="text" class="form-control" id="my_username" disabled>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--        <button type="button" class="btn btn-primary">Send message</button>-->
              </div>
            </div>
          </div>
        </div>


        <!-- user alert -->
        <div class="alert alert-warning alert-dismissible user_alert" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <strong style="font-size: 15px;" v-text="alert_text"></strong>
        </div>



        <!-- 人的修改-->
        <div class="modal fade bs-example-modal-lg-update " tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
                <h4 class="modal-title">修改个人信息</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">姓名:</label>
                    <input type="text" class="form-control" v-model="update_name">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">密码:</label>
                    <input type="text" class="form-control" v-model="my_password">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" @click="userInfo(my_id)">确认</button>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!--项目管理-->
      <div class="project" style="display:none;background-color:white;" id="project">
        <div style="margin-top:10px;height:30px;width:100%;">
          <!--项目名称模糊查询-->
          <div class="col-xs-3" style="width:22%;">
            <table>
              <tr>
                <td>项目名称:</td>
                <td>
                  <select class="form-control" id="searchProjectName" @change="changeProjectName()">
                    <option>全部</option>
                    <option v-for="(projectName,index) in projectNameList"
                            v-text="projectName.name"></option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <!--项目状态模糊查询-->
          <div class="col-xs-3" style="width:20%;">
            <table>
              <tr>
                <td>项目状态:</td>
                <td>
                  <select class="form-control" id="searchProjectStatus"
                          @change="changeProjectStatus()">
                    <option value="">请选择</option>
                    <option value="0">未完成</option>
                    <option value="1">已完成</option>
                    <option value="2">已取消</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <!--项目时间排序模糊查询-->
          <div class="col-xs-3" style="width:20%;">
            <table>
              <tr>
                <td>时间排序:</td>
                <td>
                  <select class="form-control" id="searchProjectOdtime"
                          @change="changeProjectTime()">
                    <option value="">请选择</option>
                    <option value="lead_time ">交付时间</option>
                    <option value="create_time ">创建时间</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <!--排序方式模糊查询-->
          <div class="col-xs-3" style="width:20%;">
            <table>
              <tr>
                <td>排序方式:</td>
                <td>
                  <select class="form-control" id="searchProjectOd" @change="changeProjectOd()">
                    <option value="">请选择</option>
                    <option value="1">降序</option>
                    <option value="0">升序</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <!--添加按钮-->
          <button type="button" class="btn btn-warning"
                  style="float:right;background-color:#337fc1;" data-toggle="modal"
                  data-target=".projectAddModal">添加
          </button>
        </div>
        <table class="table table-striped table-bordered bootstrap-datatable datatable responsive"
               style="width: 100% ;min-width: 1100px; margin-top:15px;">
          <tr>
            <th style="width:12%">项目名</th>
            <th style="width:12%">创建人</th>
            <th style="width:14%">描述</th>
            <th style="width:14%">创建时间</th>
            <th style="width:14%">交付时间</th>
            <th style="width:14%">任务状态</th>
            <th style="width:20%">操作</th>
          </tr>
          <tr v-for="(project,index) in projectList">
            <td v-text="project.pname"></td>
            <td v-text="project.uname"></td>
            <td v-text="project.about"></td>
            <td v-text="project.create_time"></td>
            <td v-text="project.lead_time "></td>
            <td v-if="project.state=='0'">未完成</td>
            <td v-if="project.state=='1'">已完成</td>
            <td v-if="project.state=='2'">已取消</td>
            <td>
              <button type="button" class="btn btn-warning" style="background-color:#03a9f4;"
                      data-toggle="modal" data-target=".projectDetailModal"
                      @click="getProjectDetail(project.id)">详情
              </button>
              <button type="button" class="btn btn-warning" style="background-color:#8bc34a;"
                      data-toggle="modal" data-target=".projectUpdateModal"
                      @click="getProjectDetail(project.id)">修改
              </button>
              <button type="button" class="btn btn-danger" style="background-color:#e51c23;"
                      data-toggle="modal" data-target=".projectDelModal">删除
              </button>
              <input type="hidden" class="project-del" v-bind:value="project.id">
            </td>
          </tr>
        </table>
        <!--alert框-->
        <div class="alert alert-warning alert-dismissible complete-update" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <strong style="font-size: 15px;" v-text="alertInfo"></strong>
        </div>
        <!--分页-->
        <div style="text-align: center" id="page-bar"></div>
        <!--项目管理弹出框部门-->
        <!--项目详情模态框-->
        <div class="modal fade projectDetailModal" tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="projectDetail">项目详情</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">项目名称</label>
                    <input type="text" disabled class="form-control"
                           v-bind:value="projectDetail.pname"/>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">创建人</label>
                    <input type="text" disabled class="form-control"
                           v-bind:value="projectDetail.uname">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">描述</label>
                    <input type="text" disabled class="form-control"
                           v-bind:value="projectDetail.about">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">创建时间</label>
                    <input type="text" disabled class="form-control"
                           v-bind:value="projectDetail.create_time">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">交付时间</label>
                    <input type="text" disabled class="form-control"
                           v-bind:value="projectDetail.lead_time">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>
        <!--项目修改模态框-->
        <div class="modal fade projectUpdateModal" tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="projectUpdate">修改项目</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">项目名称</label>
                    <input type="text" class="form-control project_pname"
                           v-bind:value="projectDetail.pname"/>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">创建人</label>
                    <input type="text" disabled class="form-control"
                           v-bind:value="projectDetail.uname">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">描述</label>
                    <input type="text" class="form-control project_about"
                           v-bind:value="projectDetail.about">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">创建时间</label>
                    <input type="text" disabled class="form-control"
                           v-bind:value="projectDetail.create_time">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">交付时间</label>
                    <input type="text" class="form-control project_lead_time"
                           v-bind:value="projectDetail.lead_time">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"
                        @click="getProjectUpdate(projectDetail.id)">修改
                </button>
              </div>
            </div>
          </div>
        </div>
        <!--项目添加模态框-->
        <div class="modal fade projectAddModal" tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="projectAdd">添加项目</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">项目名称</label>
                    <input type="text" class="form-control" id="project_pname" value=""/>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">描述</label>
                    <input type="text" class="form-control" id="project_about" value="">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">交付时间</label>
                    <input class="editor form-control" type="text" id="projectLeadTime"
                           placeholder="请选择交付时间">
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" @click="qxProjectAdd()">取消</button>
                <button type="button" class="btn btn-primary" @click="getProjectAdd()">确定</button>
              </div>
            </div>
          </div>
        </div>
        <!--删除模态框-->
        <div class="modal fade bs-example-modal-sm projectDelModal" tabindex="-1" role="dialog"
             aria-labelledby="mySmallModalLabel">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" style="margin: 0 0 0 100px !important;" id="projectDel">
                  删除项目</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">确定要删除么?</label>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" @click="qxProjectDel()">取消</button>
                <button type="button" class="btn btn-primary" @click="delProject()">确定</button>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!--
      =================================================================================
      -->


      <!--任务管理-->
      <div class="mission task" style="display:none;background-color:white;">
        <div style="margin-top:10px;height:90px;width:100%;background-color:#F0F0F0;">


          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>与我相关:</td>
                <td>
                  <select class="form-control " v-model="my" @change="getTaskList()" autocomplete="off">
                    <option value="">全部</option>
                    <option value="1" >我参与</option>
                    <option value="0">我创建</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>时间排序:</td>
                <td>
                  <select class="form-control" v-model="odtime" @change="getTaskList()">
                    <option value="">--请选择--</option>
                    <option value="lead_time ">交付时间</option>
                    <option value="create_time ">创建时间</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>创建者:</td>
                <td><input type="text" list="userPeople" @keydown="updateUserPeople()"
                           id="USER_NAME" @change="getTaskList()" class="form-control"
                           v-model="uid" style="display:inline;"
                           placeholder="请输入..." >
                  <datalist id="userPeople">
                   <!--  <option value="1">沉默是我的罪</option>-->
                  </datalist>
                </td>
              </tr>
            </table>
          </div>

          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>项目:</td>
                <td>
                  <select class="form-control project-select" v-model="pid" @change="getTaskList()">
                    <option value="">--请选择--</option>
                  </select></td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>排序方式:</td>
                <td>
                  <select class="form-control" v-model="od" @change="getTaskList()">
                    <option value="">--请选择--</option>
                    <option value="1">降序</option>
                    <option value="0">升序</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
          <div class="col-xs-3" style="margin-top:8px;">
            <table>
              <tr>
                <td>任务状态:</td>
                <td>
                  <select class="form-control" v-model="state" @change="getTaskList()">
                    <option value="">--请选择--</option>
                    <option value="0">未完成</option>
                    <option value="1">已完成</option>
                    <option value="2">已取消</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div style="margin-top:10px;height:30px;width:100%;">
          <button type="button" class="btn btn-primary"
                  data-target=".task-add" data-toggle="modal"
                  style="float:right;" @click="getUserList()">添加</button>
        </div>
        <table class="table table-striped table-bordered bootstrap-datatable datatable responsive"
               style="width: 100% ;min-width: 1100px; margin-top:10px;">
           <tr>
            <th style="width:5%">任务ID</th>
            <th style="width:22%">内容</th>
            <th style="width:6%">创建者</th>
            <th style="width:14%">交付时间</th>
            <th style="width:5%">状态</th>
            <th style="width:11%">修改人</th>
            <th style="width:14%">修改时间</th>
            <th style="width:11%">参与人</th>
            <th style="width:11%">操作</th>
          </tr>
          <tr v-for="(task,index) in taskList" >
            <td @click="xiangqingById(task.id)">{{task.id}}</td>
            <td @click="xiangqingById(task.id)">{{task.content}}</td>
            <td @click="xiangqingById(task.id)">{{task.uname}}</td>
            <td @click="xiangqingById(task.id)">{{task.lead_time}}</td>
            <td v-if="task.state==0" style="color:red;" @click="xiangqingById(task.id)">未完成</td>
            <td v-if="task.state==1" style="color:green;" @click="xiangqingById(task.id)">已完成</td>
            <td v-if="task.state==2" style="color:yellow;" @click="xiangqingById(task.id)">已取消</td>
            <td @click="xiangqingById(task.id)">{{task.update_username}}</td>
            <td @click="xiangqingById(task.id)">{{task.update_time}}</td>
            <td @click="lookerPeople(task.id)" data-target=".task-looker" data-toggle="modal">{{task.baby}}</td>
            <td>
      <!--        <button type="button" class="btn btn-info" data-toggle="modal"
                      data-target=".bs-example-modal-lg" @click="baby(user.id)">详情
              </button>-->
              <button type="button" class="btn btn-warning"
                      data-target=".task-update" data-toggle="modal"
                      @click="updateTask(task.id)">修改
              </button>
              <!--@click="deteleTaskById(task.id)"-->
              <button type="button" class="btn btn-danger"  data-target=".deleteTaskModal" data-toggle="modal" @click="deteleTaskById(task.id,true)">删除
              </button>
            </td>
          </tr>
        </table>
        <div style="text-align: center" id="page-bar-task"></div>
        <div class="modal fade task-add " tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
            <!--    <h4 class="modal-title">修改个人信息</h4>-->
                 <div style="width:100%;height: 50px;"><h4 style="color:white;">添加任务</h4></div>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">任务内容:</label>
                    <input type="text" class="form-control" v-model="my_content">
                  </div>
                  <div class="form-group">
                  <label for="recipient-name" class="control-label">关联项目:</label>
                  <select  class="form-control project_u" v-model="my_project" >

                  </select>
                </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label" >交付时间:</label>
                    <input type="text" class="form-control" id="my_loadTime" >
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">任务状态:</label>
                    <select class="form-control" v-model="my_state" autocomplete="off">
                      <option value="0">未完成</option>
                      <option value="1">已完成</option>
                      <option value="2">已取消</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">参与人员:</label>
                    <div style="width:100%;min-height: 34px;" id="canyurenyuan">
                      <!--<span class="glyphicon glyphicon-plus" aria-hidden="true" @click="addUser"></span>-->
            <!--          <div class="user_select user_no">刘晓鹏</div>
                      <div class="user_select user_no">刘晓鹏</div>-->
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"  @click="addTask">确认</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade task-update " tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
                <!--    <h4 class="modal-title">修改个人信息</h4>-->
                <div style="width:100%;height: 50px;"><h4 style="color:white;">修改任务</h4></div>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">任务内容:</label>
                    <input type="text" class="form-control" v-model="update_content">
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" autocomplete="off" class="control-label">关联项目:</label>
                    <select  class="form-control project_u" autocomplete="off" v-model="update_project"  >
                        <option value="">--请选择--</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label" >交付时间:</label>
                    <input type="text" class="form-control" id="update_loadTime" >
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">任务状态:</label>
                    <select   class="form-control update_state" autocomplete="off"  v-model="update_state" >
                      <option value="">--请选择--</option>
                      <option value="0">未完成</option>
                      <option value="1">已完成</option>
                      <option value="2">已取消</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">参与人员:</label>
                    <div style="width:100%;min-height: 34px;" id="update_canyurenyuan">
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"  @click="updateTaskById">确认</button>
              </div>
            </div>
          </div>
        </div>


        <!--删除模态框task-->
        <div class="modal fade deleteTaskModal" tabindex="-1" role="dialog"
             aria-labelledby="mySmallModalLabel">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" style="margin: 0 0 0 100px !important;" >
                  删除任务</h4>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">确定要删除么?</label>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" @click="deteleTaskById(null,false)">确定</button>
              </div>
            </div>
          </div>
        </div>

        <!-- task alert -->
        <div class="alert alert-warning alert-dismissible task_alert" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <strong style="font-size: 15px;" v-text="alert_text"></strong>
        </div>

        <!--task 参与人 -->
        <div class="modal fade task-looker " tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
                <!--    <h4 class="modal-title">修改个人信息</h4>-->
                <div style="width:100%;height: 50px;"><h4 style="color:white;">任务详情</h4></div>
              </div>
              <div class="modal-body ">
                <table class="table table-striped table-bordered bootstrap-datatable datatable responsive"
                       style="width: 100% ; margin-top:10px;">
                  <tr>
                    <th style="width:50%">参与人姓名</th>
                    <th style="width:50%">参与人账号</th>
                  </tr>
                  <tr v-for="(looker,index) in looker_people">
                    <td>{{looker.name}}</td>
                    <td>{{looker.username}}</td>
                  </tr>
                </table>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--                <button type="button" class="btn btn-primary"  @click="updateTaskById">确认</button>-->
              </div>
            </div>
          </div>
        </div>





        <div class="modal fade task-detail " tabindex="-1" role="dialog"
             aria-labelledby="myLargeModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
                <!--    <h4 class="modal-title">修改个人信息</h4>-->
                <div style="width:100%;height: 50px;"><h4 style="color:white;">任务详情</h4></div>
              </div>
              <div class="modal-body ">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">任务内容:</label>
                    <input type="text" class="form-control" v-model="detail_content" disabled>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" autocomplete="off" class="control-label">关联项目:</label>
                    <select  class="form-control project_detail" autocomplete="off" v-model="detail_project" disabled  >
                      <option value="">--请选择--</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label" >创建者:</label>
                    <input type="text" class="form-control" v-model="detail_create_user" disabled>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label" >交付时间:</label>
                    <input type="text" class="form-control" v-model="datail_leadtime" disabled>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">状态:</label>
                    <select   class="form-control update_state" autocomplete="off"  v-model="update_state" disabled>
                      <option value="">--请选择--</option>
                      <option value="0">未完成</option>
                      <option value="1">已完成</option>
                      <option value="2">已取消</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label" >最后更新人:</label>
                    <input type="text" class="form-control" v-model="datail_update_user" disabled>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label" >最后更新时间:</label>
                    <input type="text" class="form-control" v-model="datail_update_time" disabled>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">参与人员:</label>
                    <div style="width:100%;min-height: 34px;" id="detail_canyurenyuan" >
                    </div>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                <button type="button" class="btn btn-primary"  @click="updateTaskById">确认</button>-->
              </div>
            </div>
          </div>
        </div>


      </div>
    </section>
  </section>
  <!--footer start-->
  <!--  <footer class="site-footer">
      版权所有：奥维信息科技有限公司 © Copyright 2017
    </footer>-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-1.8.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--时间插件-->
<script src="js/bootstrap-datetimepicker.js"></script>
<!--分页插件-->
<script src="js/common-tool.js"></script>
<!-- 分页条-->
<script type="text/javascript" src="js/extendPagination.js"></script>
<script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="assets/js/jquery.sparkline.js"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>

<script src="js/vue.min.js"></script>

<!--common script for all pages-->
<script src="assets/js/common-scripts.js"></script>
<!--script for this page-->
<script src="js/server-url.js"></script>
<script type="application/javascript">

  $(function () {
    var uid = localStorage.getItem('uid');
    if(uid == '' || uid == null){
      window.location.href='login.html';
      return false;
    }
    $('.project').hide();
    $('.mission').hide();
    $('#projectLeadTime').datetimepicker({});
    $('.project_lead_time').datetimepicker({});
    $('#my_loadTime').datetimepicker({});
  })
  var app1 = new Vue({
    el:'.baby',
    data:{
      people_name:""
    },
    created:function () {
      var _this=this;

      _this.people_name=localStorage.getItem("username");
    },
    methods:{

    }
  })
  var app2 = new Vue({
    el: '.people',
    data: {
      message: '页面加载于 ',
      userList: [],
      my_name: "",
      my_username: "",
      my_password: "",
      my_id: "",
      update_name: "",
      update_password: "",
      alert_text:""
    },
    created: function () {
      var _this = this;
      _this.findUserList();
    },
    methods: {
      findUserList: function () {
        var _this = this;
        var _success = function (_data) {
          _this.userList = _data.data;
        }
        var _error = function (_data) {

        }
        UntilAjax("user/getList", 'get', '', _success, _error);
      },
      baby: function (_id) {
        var _this = this;
        var uid = _id;
        var data = {
          uid: uid
        }
        var _success = function (_data) {
          _this.my_name = _data.data.name;
          $('#my_name').val(_this.my_name);
          _this.my_username = _data.data.username;
          $('#my_username').val(_this.my_username)
        }
        var _error = function (_data) {

        }
        UntilAjax("user/get", 'get', data, _success, _error);
      },
      updatebaby: function (_id) {
        var _this = this;
        var uid = _id;
        var data = {
          uid: uid
        }
        var _success = function (_data) {
          _this.update_name = _data.data.name;
          _this.my_id = _data.data.id
        }
        var _error = function (_data) {

        }
        UntilAjax("user/get", 'get', data, _success, _error);
      },
      userInfo: function () {
        var _this = this;
        var _success = function (_data) {
          $('.bs-example-modal-lg-update').modal('hide');
          _this.alert_text=_data.message
          $('.user_alert').show();
          setTimeout(function(){
            $('.user_alert').hide();//找到对应的标签隐藏
          },1000)//

          _this.findUserList();
        }
        var _error = function (_data) {
          console.log(app2.data)
        }
        var data = {
          uid: _this.my_id,
          name: _this.update_name,
          password: _this.update_password
        }
        UntilAjax("user/set", "post", data, _success, _error);
      },
      deteleUserById: function (_id) {
        var _this = this;
        var _success = function (_data) {
          $('bs-example-modal-lg-update').modal('hide');
          _this.alert_text=_data.message
          $('.user_alert').show();
          setTimeout(function(){
            $('.user_alert').hide();//找到对应的标签隐藏
          },1000)//
          _this.findUserList();
        }
        var _error = function (_data) {
        }
        UntilAjax("user/rm", 'get', {uid: _id}, _success, _error);
      }

    }
  })

  var app3 = new Vue({
    el: '.task',
    data: {
      my: "1",
      odtime: "",
      uid: "",
      pid: "",
      state: "",
      od: "",
      taskList: [],
      task_canyuren:"",
      my_content:"",
      my_state:"0",
/*      my_loadTime:"",*/
      my_project:"",
      update_content:"",
      update_project:"",
      update_state:"",
      update_id:"",
      detail_content:"",
      detail_project:"",
      detail_create_user:"",
      datail_leadtime:"",
      update_state:"",
      datail_update_user:"",
      datail_update_time:"",
      delete_id:"",
      alert_text:"",
      looker_people:[]
    },
    created: function () {
      var _this = this;
      _this.getTaskList();
      _this.getProjectList();

      $('.task_alert').show();
    },
    methods: {
      lookerPeople:function (_id) {
        var _this=this;
        var _success=function (_data) {
         _this.looker_people=_data.data.listuser;
        };
        var _error=function (_data) {

        }
        UntilAjax("tasks/get","get",{tid:_id},_success,_error)
      },
      deteleTaskById:function (_id,flag) {
        var _this=this;
        if(flag){
          _this.delete_id=_id;
        }else {
          var _success = function (_data) {

            $('.deleteTaskModal').modal('hide')
          _this.alert_text=_data.message
            $('.task_alert').show();
            setTimeout(function(){
              $('.task_alert').hide();//找到对应的标签隐藏
            },1000)//
            _this.getTaskList();
          };
          var _error = function (_data) {

          }
          UntilAjax("tasks/rm", "get", {tid:_this.delete_id}, _success, _error)
        }
      },
      xiangqingById:function (_id) {
        var _this=this;
        $('.task-detail').modal('show');
         _this.getUserList();
      var _success=function (_data) {
          _this.detail_content=_data.data.content;
          $('.project_detail option').each(function () {
            if($(this).val()==_data.data.pid){
                _this.detail_project=_data.data.pid;
            }
          })
          _this.detail_create_user=_data.data.pname;
          _this.datail_leadtime=_data.data.lead_time;
          _this.update_state=_data.data.state;
          _this.datail_update_user=_data.data.update_username;
          _this.datail_update_time=_data.data.update_time;
        $('#detail_canyurenyuan .user_select').each(function () {
          if(_data.data.listuser.length > 0){
            for(var i=0;i< _data.data.listuser.length;i++){
              if($(this).attr("data-id")==_data.data.listuser[i].uid){
                $(this).removeClass("user_no");
                $(this).addClass("user_yes");
              }
            }
          }
          /*   if($(this).attr("data-id"))*/
        })
      };
      var _error=function (_data) {
        
      }
      UntilAjax("tasks/get",'get',{tid:_id},_success,_error)
      },
      updateTaskById:function () {
        var _this=this;
       var _success=function (_data) {

         $('.task-update').modal('hide');
         _this.alert_text=_data.message

         $('.task_alert').show();
         setTimeout(function(){
           $('.task_alert').hide();//找到对应的标签隐藏
         },1000)//
         _this.getTaskList();
       };
       var _error=function (_data) {

       }
        var ids=""
        $('#update_canyurenyuan .user_select').each(function () {
          if($(this).hasClass("user_yes")){
            ids+=$(this).attr("data-id")+",";
          }
        })
        ids=ids.substring(0,ids.length-1);
       var data={
         tid:_this.update_id,
         content:_this.update_content,
         lead_time:$('#update_loadTime').val(),
         state:_this.update_state,
         uid:localStorage.getItem("uid"),
         cuids:ids
       }
       UntilAjax("tasks/set","post",data,_success,_error)
      },
      updateTask:function (_id) {
        var _this=this;
        _this.getUserList();
        _this.update_id=_id
         var _success=function (_data) {
            _this.update_content=_data.data.content;
           $('#update_loadTime').val(_data.data.lead_time)
           $('.project_u option').each(function () {
             if($(this).val()==_data.data.pid){
               _this.update_project=$(this).val();
             }
           });
           $('.update_state option').each(function () {
             if($(this).val()==_data.data.state){
              _this.update_state=$(this).val();
             }
           })

           $('#update_canyurenyuan .user_select').each(function () {
              if(_data.data.listuser.length > 0){
                for(var i=0;i< _data.data.listuser.length;i++){
                  if($(this).attr("data-id")==_data.data.listuser[i].uid){
                    $(this).removeClass("user_no");
                    $(this).addClass("user_yes");
                  }
                }
              }
             /*   if($(this).attr("data-id"))*/
           })
           $('.update_state').val(_data.data.state)
         };
         var _error=function (_data) {

         }
         UntilAjax("tasks/get","get",{tid:_id},_success,_error)
      },
      getProjectList:function () {
        var _this=this;
        var _success=function (_data) {
          if(_data.data.list.length>0) {
            for (var i = 0; i < _data.data.list.length; i++) {
              $('.project-select').append(
                  "<option value='"+_data.data.list[i].id+"'>" + _data.data.list[i].pname + "</option>")
              $('.project_u').append("<option value='"+_data.data.list[i].id+"'>" + _data.data.list[i].pname + "</option>")
              $('.project_detail').append("<option value='"+_data.data.list[i].id+"'>" + _data.data.list[i].pname + "</option>")
            }
          }
        };
        var _error=function (_data) {
        }
        UntilAjax("projects/getList",'get',{size:100},_success, _error)
      },
      updateUserPeople:function () {
        var _this=this;
        var username=_this.uid;
        var _success=function (_data) {
          $('#userPeople').empty();
          if(_data.data.length>0){
            for(var i=0;i<_data.data.length;i++){
              $('#userPeople').append("<option value='"+_data.data[i].id+"-"+_data.data[i].name+"-"+_data.data[i].username+"' ></option>")
              /*<option value='"+_data.data[i].id+"'>"+_data.data[i].name+"</option>*/
            }
          }
  /*    $('#userPeople').show();*/
        };
        var _error=function (_data) {

        }
        UntilAjax('user/getUserList','get',{username:username},_success,_error)
      },
      addTask:function(){
        var _this=this;
        var ids=""
        $('#canyurenyuan .user_select').each(function () {
         if($(this).hasClass("user_yes")){
            ids+=$(this).attr("data-id")+",";
         }
        })
        ids=ids.substring(0,ids.length-1);
       
        var data={
          content:_this.my_content,
          pid:_this.my_project,
          uid:localStorage.getItem("uid"),
          lead_time:$('#my_loadTime').val(),
          state:_this.my_state,
          cuids:ids
        }
        var _success=function (_data) {

          $('.task-add').modal("hide");
          _this.alert_text=_data.message
          $('.task_alert').show();
          setTimeout(function(){
            $('.task_alert').hide();//找到对应的标签隐藏
          },1000)//
          _this.getTaskList();
        };
        var _error=function (_data) {

        }
        UntilAjax("tasks/add","post",data,_success,_error)
      },
      cleanAddShuJu:function () {
        var _this=this;
        _this.my_content="",
        _this.my_state="0",
        _this.my_project="",
            $('#my_loadTime').val();
      },
      getUserList:function () {
        var _this=this;
        _this.cleanAddShuJu();
        $('#canyurenyuan').html("");
        $('#update_canyurenyuan').html("");
        $('#detail_canyurenyuan').html('');
        var _success=function (_data) {
          if(_data.data.length > 0) {
            for (var i = 0; i < _data.data.length; i++) {
              $('#canyurenyuan').append(
                  "<div class='user_select user_no ' data-id='" + _data.data[i].id + "' >"+_data.data[i].name+"</div>")
              $('#update_canyurenyuan').append("<div class='user_select user_no ' data-id='" + _data.data[i].id + "' >"+_data.data[i].name+"</div>");

              $('#detail_canyurenyuan').append("<div class='user_select user_no no_change' data-id='" + _data.data[i].id + "' >"+_data.data[i].name+"</div>")
            }
            $('.user_select').on('click',function () {
              if($(this).hasClass("no_change")){
              }else {
                if ($(this).hasClass("user_no")) {
                  $(this).removeClass("user_no");
                  $(this).addClass("user_yes");
                } else {
                  $(this).removeClass("user_yes");
                  $(this).addClass("user_no");
                }
              }
            })
          }
        }
        var _error=function(_data){

        }
        UntilAjax('user/getList','get',"",_success,_error)
      },
      changPeople:function () {

      },
      getTaskList: function (_page,baby) {

        var _this = this;

        var changePage=true;
        if(baby==false){
          changePage=false;
        }
        var page = 1;
        if (_page == null || _page == "") {
          page = 1;
        } else {
          page = _page;
        }
        var newuid="";
        if(_this.uid!=null){
          var uIds=_this.uid.split("-");
          for(var i=0;i<uIds.length;i++){
            newuid=uIds[0]
          }
        }

        if(_this.my==null||_this.my==""){

        }else{
          newuid=localStorage.getItem("uid");
        }

        var data = {
          uid: newuid,
          my: _this.my,
          odtime: _this.odtime,
          pid: _this.pid,
          state: _this.state,
          od: _this.od,
          page: page
        }
        var _success = function (_data) {
          if (_data.data.list.length > 0) {
            for (var i = 0; i < _data.data.list.length; i++) {
              if (_data.data.list[i].listuser.length > 0) {
                for (var j = 0; j < _data.data.list[i].listuser.length; j++) {
                  if (_data.data.list[i].listuser.length > 1) {
                    _data.data.list[i].baby = _data.data.list[i].listuser[0].name + "...";
                  } else {
                    _data.data.list[i].baby = _data.data.list[i].listuser[0].name
                  }
                }
              }
            }
          }
          _this.taskList = _data.data.list;

          if (changePage){
            if (_page != null || _page != "") {
              var totalRow = _data.data.totalRow;
              var pageSize = _data.data.pageSize;
              $('#page-bar-task').extendPagination({
                totalCount: totalRow,
                limit: pageSize,
                callback: function (curr, limit, totalCount) {
                  // curr 页数
                  _page = curr;
                  _this.getTaskList(_page,false);
                }
              });
            }
        }
        };
        var _error = function (_data) {

        }
        UntilAjax("tasks/getList",'get',data,_success, _error)
      }
    }
  })

  $('.user').on('click', function () {
    $('.project').hide();
    $('.mission').hide();
    $('.management').show();
    app2.getUserList();
  })
  $('.renwu').on('click', function () {
    $('.management').hide();
    $('.project').hide();
    $('.mission').show();
    app3.getTaskList();
  })

  /*项目管理方法*/
  $(".xiangmu").on('click', function () {
    $('.project').show();
    $('.management').hide();
    $('.mission').hide();

    project.getProjectList(true);
    project.getProjectList()
  });
  var project = new Vue({
  el: '#project',
  data: {
    projectList: [],//项目列表
    projectNameList:[],//项目名称列表
    projectDetail: {},//项目详情
    projectName:'',//模糊查询项目名称
    projectStatus:'',//模糊查询项目状态
    projectOdtime:'',//按什么时间排序（lead_time 交付时间,create_time 创建时间）
    projectOd:'',//时间排序
    alertInfo:'',//弹出框信息
    projectpageNumber: 1,//页码
    projecttotalRow: 0, //总数
  },
  created: function () {
    var self = this;
    self.getProjectList(true);
    self.getProjectNameList();
  },
  methods: {
    /*项目列表*/
    getProjectList: function (initPage) {
      var self = this;
      var projectName = self.projectName;
      var projectStatus = self.projectStatus;
      var projectOdtime = self.projectOdtime;
      var projectOd = self.projectOd;
      if(projectName =='全部'){
        projectName = '';
      }
      if(projectStatus =='请选择'){
        projectStatus = '';
      }
      if(projectOdtime =='请选择'){
        projectOdtime = '';
      }
      if(projectOd =='请选择'){
        projectOd = '';
      }
      $.ajax({
        url: 'projects/getList',
        method: 'GET',
        data: {
          'page':self.projectpageNumber,
          'size':10,
          'pname':projectName,
          'odtime':projectOdtime,
          'od':projectOd,
          'state':projectStatus
        },
        success: function (data) {
          console.log('项目列表', data);
          if (data.code == 1) {
            var totalRow = data.data.totalRow;
            var pageSize = data.data.pageSize;
            self.projecttotalRow = totalRow;
            if(initPage == true){ // 初始化页面 分页条
              $('#page-bar').extendPagination({
                totalCount: totalRow,
                limit: pageSize,
                callback: function (curr, limit, totalCount) {
                  // curr 页数
                  self.projectpageNumber = curr;
                  self.getProjectList(false);
                  console.log('curr',curr);
                  console.log('limit',limit);
                  console.log('totalCount',totalCount);
                }
              });
            }
            self.projectList = data.data.list;
            console.log('projectList', self.projectList);
          } else {

          }
        }
      });
    },
    /*项目名称列表*/
    getProjectNameList:function () {
      var self = this;
      $.ajax({
        url: 'projects/getListPname',
        method: 'GET',
        data: {},
        success: function (data) {
          console.log('项目名称列表', data);
          if (data.code == 1) {
            self.projectNameList = data.data;
            console.log('projectNameList', self.projectNameList);
          } else {

          }
        }
      });
    },
    /*项目详情*/
    getProjectDetail: function (param) {
      var self = this;
      $.ajax({
        url: 'projects/get',
        method: 'GET',
        data: {
          'pid': param
        },
        success: function (data) {
          console.log('项目详情', data);
          if (data.code == 1) {
            self.projectDetail = data.data;
            console.log('projectDetail', self.projectDetail);
          } else {

          }
        }
      });
    },
    /*修改项目*/
    getProjectUpdate: function (param) {
      var self = this;
      var projectName = $('.project_pname').val();
      var projectAbout = $('.project_about').val();
      var projectLeadTime = $('.project_lead_time').val().trim();
      if (projectName == "" || projectName == null) {
        /*弹出框内容*/
        self.alertInfo='项目名称不能为空';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return false
      }
      if (projectAbout == "" || projectAbout == null) {
        /*弹出框内容*/
        self.alertInfo='项目描述不能为空';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return false
      }
      if (projectLeadTime == "" || projectLeadTime == null) {
        /*弹出框内容*/
        self.alertInfo='交付时间不能为空';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return false
      }
      var time = projectLeadTime.replace(/-/g, "/");
      var nowtime = new Date(time);
      var myDate = new Date();
      if (nowtime < myDate) {
        /*弹出框内容*/
        self.alertInfo='交付时间不能早于当前时间';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return;
      }
      $.ajax({
        url: 'projects/set',
        method: 'POST',
        data: {
          'name': projectName,
          'lead_time': projectLeadTime,
          'about': projectAbout,
          'pid': param
        },
        success: function (data) {
          if (data.code == 1) {
            $('.projectUpdateModal').modal('hide');
            /*弹出框内容*/
            self.alertInfo=data.message;
            $('.complete-update').show();
            setTimeout(function(){
              $('.complete-update').hide();//找到对应的标签隐藏
            },1000)//1000是表示3秒后执行隐藏代码
            /*调用列表*/
            self.getProjectNameList();
            self.getProjectList();
          } else {
            /*弹出框内容*/
            self.alertInfo=data.message;
            $('.complete-update').show();
            setTimeout(function(){
              $('.complete-update').hide();//找到对应的标签隐藏
            },1000)//1000是表示3秒后执行隐藏代码
          }
        }
      });
    },
    /*项目删除*/
    delProject: function () {
      var self = this;
      var id = $('.project-del').val();
      $.ajax({
        url: 'projects/rm',
        method: 'GET',
        data: {
          'pid': id
        },
        success: function (data) {
          if (data.code == 1) {
            $('.projectDelModal').modal('hide');
            /*弹出框内容*/
            self.alertInfo=data.message;
            $('.complete-update').show();
            setTimeout(function(){
              $('.complete-update').hide();//找到对应的标签隐藏
            },1000)//1000是表示3秒后执行隐藏代码

            self.getProjectList();
          } else {
            $('.projectDelModal').modal('hide');
            /*弹出框内容*/
            self.alertInfo=data.message;
            $('.complete-update').show();
            setTimeout(function(){
              $('.complete-update').hide();//找到对应的标签隐藏
            },1000)//1000是表示3秒后执行隐藏代码
          }
        }
      });
    },
    /*取消删除*/
    qxProjectDel:function () {
      $('.projectDelModal').modal('hide');
    },
    /*项目添加*/
    getProjectAdd:function () {
      var self = this;
      var projectName = $('#project_pname').val();
      var projectAbout = $('#project_about').val();
      var projectLeadTime = $('#projectLeadTime').val().trim();
      var uid = localStorage.getItem('uid');
      /* console.log('projectName',projectName);
       console.log('projectAbout',projectAbout);
       console.log('projectLeadTime',projectLeadTime);*/
      if (projectName == "" || projectName == null) {
        /*弹出框内容*/
        self.alertInfo='项目名称不能为空';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return false
      }
      if (projectAbout == "" || projectAbout == null) {
        /*弹出框内容*/
        self.alertInfo='项目描述不能为空';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return false
      }
      if (projectLeadTime == "" || projectLeadTime == null) {
        /*弹出框内容*/
        self.alertInfo='交付时间不能为空';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return false
      }
      var time = projectLeadTime.replace(/-/g, "/");
      var nowtime = new Date(time);
      var myDate = new Date();
      if (nowtime < myDate) {
        /*弹出框内容*/
        self.alertInfo='交付时间不能早于当前时间';
        $('.complete-update').show();
        setTimeout(function(){
          $('.complete-update').hide();//找到对应的标签隐藏
        },1000)//1000是表示3秒后执行隐藏代码

        return;
      }
      $.ajax({
        url: 'projects/add',
        method: 'POST',
        data: {
          'name': projectName,
          'about': projectAbout,
          'lead_time': projectLeadTime,
          'uid':uid
        },
        success: function (data) {
          console.log('添加完成后返回来的值',data);
          if (data.code == 1) {
            $('#project_pname').val("");
            $('#project_about').val("");
            $('#projectLeadTime').val("");
            $('.projectAddModal').modal('hide');

            /*弹出框内容*/
            self.alertInfo=data.message;
            $('.complete-update').show();
            setTimeout(function(){
              $('.complete-update').hide();//找到对应的标签隐藏
            },1000)//1000是表示3秒后执行隐藏代码

            self.getProjectList();
          } else {
            self.alertInfo=data.message;
            $('.complete-update').show();
            setTimeout(function(){
              $('.complete-update').hide();//找到对应的标签隐藏
            },1000)//1000是表示3秒后执行隐藏代码
          }
        }
      });
    },
    /*添加弹出框取消*/
    qxProjectAdd:function () {
      $('#project_pname').val("");
      $('#project_about').val("");
      $('#projectLeadTime').val("");
      $('.projectAddModal').modal('hide');
    },
    /*项目名称模糊查询*/
    changeProjectName:function () {
      var self = this;
      var projectName = $('#searchProjectName option:selected').val();
      self.projectName = projectName;

      self.getProjectList(true);
    },
    /*项目状态模糊查询*/
    changeProjectStatus:function () {
      var self = this;
      var projectStatus = $('#searchProjectStatus option:selected').val();
      self.projectStatus = projectStatus;

      self.getProjectList(true);
    },
    /*按哪个时间排序模糊查询（创建时间/交付时间）*/
    changeProjectTime:function () {
      var self = this;
      var projectOdtime = $('#searchProjectOdtime option:selected').val();
      self.projectOdtime = projectOdtime;
//
      self.getProjectList(true);
    },
    /*时间排序（正序/倒序）*/
    changeProjectOd:function () {
      var self = this;
      var projectOd = $('#searchProjectOd option:selected').val();
      self.projectOd = projectOd;

      self.getProjectList(true);
    },
  },
});
</script>
<style>
  button.btn{
    outline:none;
  }
  .btn {
    padding: 4px 15px !important;
  }

  .modal-header {
    background: #5c6886 !important;
  }

  .modal-title {
    width: 80px !important;
    margin: 0 0 0 235px !important;
  }

  .user_select {
    height:20px ;
    text-align: center;
    display: inline;
    margin-right:10px;
  }
  .user_no{
    border:1px solid black;
    color:black;
  }
  .user_yes{
    border:1px solid red;
    color:red;
  }


  .btn-danger {
    border-color: #fff!important;
  }
  .btn-warning {
    border-color: #fff!important;
  }
  .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
    border-color: #fff!important;
  }
  .alert-warning {
    color: #fff!important;
    background-color: #424a5d!important;
     border-color: #fff!important;
  }

  .complete-update  {
    z-index: 1234;
    display: none;
    position: absolute;
    top: 65px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  }
  .task_alert{
    z-index: 1234;
    display: none;
    position: absolute;
    top: 65px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  }
  .user_alert{
    z-index: 1234;
    display: none;
    position: absolute;
    top: 65px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  }
</style>
</body>
</html>